<template>
  <template v-for="(item, index) in list" :key="index">
    <div class="left_item" :class="{ active: item.name === active }">
      <div class="flex_block item_name" @click="handleMenuActive(item,list)">
        <el-icon><FolderOpened /></el-icon>
        <div>{{ item.name }}</div>
      </div>
      <div v-if="!item.children.length == 0" @click="handleRetract(item)">
        <el-icon v-if="item.isShow"><ArrowDown /></el-icon>
        <el-icon v-else><ArrowUp /></el-icon>
      </div>
    </div>
    <template v-if="item.children && item.children.length > 0 && item.isShow">
      <div style="margin-left: 15px">
        <LeftMeun
          :list="item.children"
          :active="active"
          @change="handleMenuActive"
        ></LeftMeun>
      </div>
    </template>
  </template>
</template>

<script setup >
defineProps(["list", "active"]);
const emit = defineEmits(["change"]);
const handleMenuActive = (event,list) => {
  emit("change", event,list);
};
const handleRetract = (event) => {
  event.isShow = !event.isShow
};

</script>
<style scoped lang="scss">
.left_item {
  height: 38px;
  width: 100%;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  .el-icon {
    margin: 0 5px;
  }
  cursor: pointer;
  &:hover {
    background-color: #cccccc;
  }
  &.active {
    background-color: #e8f3ff;
  }
}
.item_name{
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>